<div class="wrapper">
    <nz-steps [nzCurrent]="current">
        <nz-step nzTitle="选择地图参数"></nz-step>
        <nz-step nzTitle="查看地图"></nz-step>
    </nz-steps>
    <main>
        <section *ngIf="current === 0">
            <form [formGroup]="validateForm" class="form">
                <nz-form-item>
                    <nz-form-label style="line-height: 46px" [nzSpan]="6" nzFor="template">选择统计模板</nz-form-label>
                    <nz-form-control [nzSpan]="14">
                        <nz-radio-group formControlName="template" (ngModelChange)="templateChange($event)">
                            <label nz-radio nzValue="A" [title]="templateNotes.A">
                                <kylin-icon icon="dot-chart" class="kylin-icon"></kylin-icon>
                                <span class="kylin-icon-title">分段设色</span>
                            </label>
                            <label nz-radio nzValue="B" [title]="templateNotes.B">
                                <kylin-icon icon="bar-chart" class="kylin-icon"></kylin-icon>
                                <span class="kylin-icon-title">柱状统计</span>
                            </label>
                            <!-- <label nz-radio nzValue="C" [title]="templateNotes.C">
                                <kylin-icon icon="pie-chart" class="kylin-icon"></kylin-icon>
                                <span class="kylin-icon-title">饼状统计</span>
                            </label> -->
                            <label nz-radio nzValue="D" [title]="templateNotes.D">
                                <kylin-icon icon="file-word" class="kylin-icon"></kylin-icon>
                                <span class="kylin-icon-title">文字统计</span>
                            </label>
                        </nz-radio-group>
                    </nz-form-control>
                </nz-form-item>

                <nz-form-item>
                    <nz-form-label [nzSpan]="6" nzFor="layers">选择图层</nz-form-label>
                    <nz-form-control [nzSpan]="14">
                        <nz-select formControlName="layers" style="width: 300px;" nzAllowClear nzShowSearch
                            nzPlaceHolder="请输入您想要的搜索的图层名称" (nzOnSearch)="fetchLayersOptions($event)"
                            (ngModelChange)="fetchPropertiesOptions($event)">
                            <nz-option *ngFor="let i of layersOptions" [nzValue]="i.value" [nzLabel]="i.label">
                            </nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>

                <nz-form-item>
                    <nz-form-label [nzSpan]="6" nzFor="properties">选择属性</nz-form-label>
                    <nz-form-control [nzSpan]="14">
                        <nz-select formControlName="properties" style="width: 300px;" nzAllowClear nzShowSearch
                            nzPlaceHolder="请选择您发布的图层" [nzMaxMultipleCount]="seletcPropertiesMaxMultipleCount"
                            [nzMode]="selectPropertiesMultiple">
                            <nz-option *ngFor="let i of propertiesOptions" [nzValue]="i.value" [nzLabel]="i.label">
                            </nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSpan]="6" nzFor="email" class="button-group"></nz-form-label>
                    <nz-form-control [nzSpan]="14">
                        <button nz-button nzType="default" (click)="resetForm()">重置</button>
                        <button [nzLoading]="submitButtonLoading" nz-button nzType="primary" style="margin-left:24px"
                            (click)="submitForm()">提交</button>
                    </nz-form-control>
                </nz-form-item>
                <nz-alert style="margin-top:8px;width:auto;" nzType="info" [nzMessage]="currentNotes" nzShowIcon>
                </nz-alert>
            </form>
        </section>
        <section style="padding-top: 24px" *ngIf="current === 1">
            <div class="amap" id='amap'></div>
        </section>
    </main>

    <button *ngIf="current === 1" class="steps-action" nz-button nzType="default" nzShape="circle" (click)="back()"><i
            nz-icon nzType="left"></i></button>
</div>
